<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <!--新增按钮绑定单击事件：只要一单击`新增`按钮就弹出对话框表单-->
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开-->
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                <!--对话框中的表单-->
                <el-form ref="form" :model="brand" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="brand.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <!--将状态开关值设为1、0-->
                        <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button @click="dialogVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>

            <!--分页代码-->
            <template>
                <div class="block">
                    <!--
                    current-page 当前所在页
                    page-sizes 定义选择每页显示的条数
                    page-size 每页显示的条目数
                    total 设置总共的页面数
                    background 添加背景色
                    -->
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="10"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="1000">
                    </el-pagination>
                </div>
            </template>

        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        // 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中
                        console.log(this.brand);
                    },
                    // 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {});
                    },
                    //弹出的对话框中单击提交按钮后表单的添加方法
                    addBrand() {
                        console.log(this.brand);
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },
                    // 分页方法
                    handleSizeChange(val) {
                        console.log(`每页 ${val} 条`);
                    },
                    // 分页方法
                    handleCurrentChange(val) {
                        console.log(`当前页: ${val}`);
                    }
                },
                data() {
                    return {
                        // 品牌模型数据
                        brand: {
                            id: '',
                            brandName: '',
                            companyName: '',
                            status: '',
                            ordered: '',
                            description: ''
                        },
                        // 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
                        dialogVisible: false,
                        form: {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: false
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }],
                        // 分页数据：当前所在页
                        currentPage: 4
                    }
                }
            })
        </script>
    </body>
</html>